"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import Model from '@/app/admin/users/components/Modal'

import { getPowerStationList } from '@/api/powerStationApi'
import { powerStations } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState(powerStations as any);

  const Init = async () => {
    const res = await getPowerStationList()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
  }, [])
  // 删除确认框
  const DelUser = async (_id: string) => {
    // await delUser({ _id })
    // await Init()
    message.success('操作成功');
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});


  const columns = [
    {
      title: '电站 ID',
      dataIndex: 'powerStationId',
      key: 'powerStationId',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '联系人',
      dataIndex: 'contactPerson',
      key: 'contactPerson',
    },
    {
      title: '电站类型',
      dataIndex: 'stationType',
      key: 'stationType',
      render: (_: any, record: any) => (
        _ === '储能站' ?
          <Tag color='#108ee9' key={_}>
            {_}
          </Tag>
          : <Tag color='#108ee9' key={_}>
            {_}
          </Tag>

      ),
    },
    {
      title: '总储能容量(kWh)',
      dataIndex: 'totalCapacity',
      key: 'totalCapacity',
    },
    {
      title: '运营方名称',
      dataIndex: 'operator',
      key: 'operator',
    },
    {
      title: '经度',
      dataIndex: 'longitude',
      key: 'longitude',
    },
    {
      title: '纬度',
      dataIndex: 'latitude',
      key: 'latitude',
    },
    {
      title: '开放时间',
      dataIndex: 'openTime',
      key: 'openTime',
    },
    {
      title: '关闭时间',
      dataIndex: 'closeTime',
      key: 'closeTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: { powerStationId: string; }) => (
        <Space size="middle">
          <Button type="primary" size='small' onClick={() => {
            // setIsModalOpen(true); setModelPrpos({ record, type: '编辑' })
          }}>编辑</Button>
          <Popconfirm
            title="是否删除这条数据?"
            onConfirm={() => DelUser(record.powerStationId)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Table columns={columns} dataSource={data} rowKey={record => record.powerStationId} />
      <Model isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} Init={Init} />
    </div>
  </Content>
  );
};
